<template>
	<view class="wrap">
		<qs-navbar>
			<view class="u-flex u-m-l-22"><u-icon name="chat" size="38" :custom-style="{ padding: '16rpx' }" @tap="toReply"></u-icon></view>
			<view class="u-flex u-m-r-22"><u-icon name="scan" size="38" :custom-style="{ padding: '16rpx' }" @tap="scanCode"></u-icon></view>
		</qs-navbar>
		<view class="page-box">
			<view class="order"><u-notice-bar mode="horizontal" :list="todo.list"></u-notice-bar></view>
			<view class="order">
				<view class="item">
					<u-grid :col="col" :border="border">
						<u-grid-item :index="0" @click="goTo('eam/order/index')">
							<u-badge :count="todo.order" :offset="[20, 30]"></u-badge>
							<u-icon color="#19be6b" name="order" :size="46"></u-icon>
							<view class="grid-text">工单</view>
						</u-grid-item>
						<u-grid-item :index="1" @click="goTo('eam/item/plan')">
							<u-badge :count="todo.plan" :offset="[20, 30]"></u-badge>
							<u-icon color="#19be6b" name="checkbox-mark" :size="46"></u-icon>
							<view class="grid-text">巡检</view>
						</u-grid-item>
						<u-grid-item :index="2" @click="goTo('eam/maintain/plan')">
							<u-badge :count="todo.maintain" :offset="[20, 30]"></u-badge>
							<u-icon color="#19be6b" name="clock" :size="46"></u-icon>
							<view class="grid-text">保养</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="order">
				<view class="item">
					<u-grid :col="col" :border="border">
						<u-grid-item :index="0" @click="goTo('eam/order/add')">
							<u-icon color="#19be6b" name="plus" :size="46"></u-icon>
							<view class="grid-text">报修</view>
						</u-grid-item>
						<u-grid-item :index="1" @click="goTo('eam/equip/list')">
							<u-icon color="#19be6b" name="bag" :size="46"></u-icon>
							<view class="grid-text">设备列表</view>
						</u-grid-item>
						<u-grid-item :index="2" @click="goTo('eam/item/list')">
							<u-icon color="#19be6b" name="order" :size="46"></u-icon>
							<view class="grid-text">巡检项目</view>
						</u-grid-item>
						<u-grid-item :index="3" @click="goTo('eam/maintain/list')">
							<u-icon color="#19be6b" name="calendar" :size="46"></u-icon>
							<view class="grid-text">保养标准</view>
						</u-grid-item>
						<u-grid-item :index="4" @click="goTo('eam/type/list')">
							<u-icon color="#19be6b" name="grid" :size="46"></u-icon>
							<view class="grid-text">分类管理</view>
						</u-grid-item>
						<u-grid-item :index="5" @click="goTo('eam/order/my')">
							<u-icon color="#19be6b" name="account" :size="46"></u-icon>
							<view class="grid-text">我的报修</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="order">
				<view class="item">
					<u-grid :col="col" :border="border">
						<u-grid-item :index="0" @click="goTo('eqment/list/index/index')">
							<u-icon color="#19be6b" name="plus" :size="46"></u-icon>
							<view class="grid-text">设备列表</view>
						</u-grid-item>
						<u-grid-item :index="1" @click="goTo('eqment/mange/index')">
							<u-icon color="#19be6b" name="bag" :size="46"></u-icon>
							<view class="grid-text">设备管理</view>
						</u-grid-item>
						<u-grid-item :index="2" @click="goTo('eqment/group/index')">
							<u-icon color="#19be6b" name="order" :size="46"></u-icon>
							<view class="grid-text">设备组管理</view>
						</u-grid-item>
						<u-grid-item :index="3" @click="goTo('eqment/model/index')">
							<u-icon color="#19be6b" name="calendar" :size="46"></u-icon>
							<view class="grid-text">型号管理</view>
						</u-grid-item>
						<u-grid-item :index="4" @click="goTo('eqment/user/index')">
							<u-icon color="#19be6b" name="grid" :size="46"></u-icon>
							<view class="grid-text">用户管理</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDeviceMonitorList} from '../../api/eqment/index.js'
	
export default {
	data() {
		return {
			border: false,
			col: 3,
			todo: {},
			list:[]
		};
	},
	onShow() {
		if (!this.vuex_user.hasLogin) {
			this.$u.route('/pages/account/login/pwd-login');
		}
		this.request({
			url: 'EamOrder/homeTodo',
			success: r => {
				this.todo = r.data;
			}
		});
		getDeviceMonitorList({
			 pageNum:1,
			 pageSize:20,
			 orgId:1,
			 typeId:"",
		}).then(res => {
			console.log(123,res)
		})
	},
	onLoad() {},
	methods: {
		tip() {
			return this.$u.toast('开发中...');
		},
		toReply() {
			this.$u.route({
				url: '/pages/find/reply'
			});
		},
		scanCode() {
			uni.scanCode({
				scanType: ['barCode', 'qrCode'],
				success: res => {
					this.$u.route({
						url: '/pages/eam/sku/detail?id=' + res.result
					});
				}
			});
		},
		goTo(url) {
			this.$u.route({
				url: '/pages/' + url
			});
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
</style>
